import { ThemeProvider, createTheme } from "@mui/material";
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

import Layout from "./components/Layout";
import CreatePost from "./pages/CreatePost";
import Dashboard from "./pages/Dashboard";
import EditPost from "./pages/EditPost";

const theme = createTheme({
  palette: {
    primary: {
      main: "#1976d2",
    },
    secondary: {
      main: "#dc004e",
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: "none",
        },
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <Layout>
          <Routes>
            <Route path="/" element={<Dashboard />} />
            <Route path="/create" element={<CreatePost />} />
            <Route path="/edit/:id" element={<EditPost />} />
          </Routes>
        </Layout>
      </BrowserRouter>
      <ToastContainer position="bottom-right" />
    </ThemeProvider>
  );
}

/**
 * Converts API image identifiers to optimized image URLs
 * @param {string} url - Image path/identifier from API
 * @param {string} [side] - Optional width parameter for image resizing
 * @returns {string} Complete optimized image URL
 */
export function filterImage(url, side) {
  if (!url) return "";

  // Preserve existing full URLs and local files
  if (url.startsWith("file:") || url.includes("://")) return url;

  // Add image processing parameters
  let processedUrl = url;
  if (side) {
    processedUrl += `?x-oss-process=image/resize,m_lfit,w_${side}`;
  }

  // Combine with CDN/base URL
  return `https://static.ailov3.com/${processedUrl}`;
}

export default App;
